<!-- 职位列表页 -->
<template>
    <view class="cu-list menu menu-avatar list">
        <view
            v-for="(item,idx) in jobListInfo"
            :key="idx"
            class="cu-item grayscale"
            @click="gotoDetails(item.id)"
         >
            <view class="cu-avatar radius company-img" :style="{backgroundImage: 'url(' + item.companyImg + ')'}"></view>
            <view class='content'>
                <view class="overflow-hidden">{{item.jobTitle}}</view>
                <view class="text-gray text-sm overflow-hidden">
                    <text class='icon-locationfill text-orange'></text>
                    {{item.locationDetail}}
                </view>
                <view class='text-gray text-sm'>
                    <!-- 最多只显示4个 -->
                    <view
                        v-for="(tag,tagIndex) in item.jobTags"
                        :key="tagIndex"
                        v-if="tagIndex < 4"
                        :class="['cu-tag', 'radius', 'light', tagColor[tagIndex % 3]]"
                    >{{tag}}</view>
                </view>
            </view>
            <view class='action'>
                <view class='text-orange padding-xs'>{{item.jobSalary}}</view>
                <text v-for="i in item.temperature" :key="i" class='icon-hot text-orange'></text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
  data () {
    return {
        tagColor: ['bg-orange', 'bg-olive', 'bg-blue']
    };
  },

  components: {},

  computed: {
        jobListInfo() { // 获取招聘职位列表信息
            return this.$store.state.jobListInfo || [];
        },
    },

  methods: {
      gotoDetails(jobId) {
          wx.navigateTo({
              url: '/pages/details/main?jobId='+jobId
          })
      }
  }
}

</script>
<style lang='less' scoped>
/deep/ .cu-tag {
    font-size: 18rpx;
}
/deep/ .cu-list.menu-avatar>.cu-item {
    height:170rpx;
}
/deep/ .cu-list.menu-avatar>.cu-item {
    padding-left:170rpx;
}
.company-img {
    width:120rpx;
    height:120rpx;
    line-height:90rpx;
    font-size:22rpx;
}
.cu-item:hover {
    background-color:#fcf7e9;
}
.cu-item:visited {
    background-color:#fcf7e9;
}
.overflow-hidden {
    display: -webkit-box;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
</style>